<!--
 * @Author: cest
 * @Date: 2022-08-27 11:00:19
 * @LastEditTime: 2022-08-27 11:51:56
 * @LastEditors: cest
 * @FilePath: /vite-project/src/components/multi-columns/multi-columns.vue
 * @Description: multi-columns
-->
<template lang="pug">
.multi-columns
  .item.margin-bottom-4(
    v-for="item in items" 
    :key="item.id"
    :style='{ backgroundColor: item.backgroundColor, height: item.itemHeight }')
    | {{ item.id + 1 }}
</template>

<script setup lang="ts">
import { ref } from 'vue'
interface Item {
  id: number
}
const getRandomColor = () => {
  return '#' + Math.random().toString(16).substr(-6)
}
const getRandomIntInclusive = (min: number, max: number) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
const getItems = () => {
  const _items = []
  for (let index = 0; index < 16; index++) {
    const backgroundColor = getRandomColor()
    const itemHeight = getRandomIntInclusive(100, 600) + 'px'
    _items.push({
      id: index,
      backgroundColor,
      itemHeight
    })
  }
  return _items
}
const items = ref(getItems())
</script>

<style scoped lang="stylus" src="./stylus/index.styl" />
